<template>
  <div>
    <el-card class="box-card" style="text-align: center;margin: -55px auto;background: #f6f6f7;">
      <el-container>
      <app-header></app-header>
        <el-main>
            <el-row style="margin-left: 33px;">
              <el-col>
                  <div  @click="WaterCycle()">
                    <el-link :underline="false">
                      <el-col style="height: 100px; width: 337px;">
                        <span class="demonstration">水循环遥感产品</span>
                      </el-col>
                      <el-image :src="src" style="width: 300px;"></el-image>
                    </el-link>
                </div>
              </el-col>
              <el-col>
                <div  @click="riverCycle()">
                  <el-link :underline="false">
                    <el-col style="height: 100px;  width: 337px;">
                      <span class="demonstration">河道详情</span>
                    </el-col>
                    <el-image :src="src" style="width: 300px;"></el-image>
                  </el-link>
                </div>
              </el-col>
              <el-col>
                  <div  @click="WaterCycle()">
                    <el-link :underline="false">
                      <el-col style="height: 100px; width: 337px;">
                        <span class="demonstration">水循环遥感产品</span>
                      </el-col>
                      <el-image :src="src" style="width: 300px;"></el-image>
                    </el-link>
                </div>
              </el-col>
              <el-col>
                  <div  @click="WaterCycle()">
                    <el-link :underline="false">
                      <el-col style="height: 100px; width: 377px;">
                        <span class="demonstration">水循环遥感产品</span>
                      </el-col>
                      <el-image :src="src" style="width: 300px;"></el-image>
                    </el-link>
                </div>
              </el-col>
            </el-row>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import myHeader from '../../components/myHeader'
export default {
  data () {
    return {
      activeIndex1: '1',
      newList: {},
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
    }
  },
  components: {
    'app-header': myHeader
  },
  methods: {
    WaterCycle () {
      this.$router.push({ path: '/infoList' })
    },
    riverCycle () {
      this.$router.push({ path: '/riverList' })
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #1a75ce;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}
.el-col {
  width: 24%;
}

</style>
